<template>

  <div>


    <el-row>
      <el-col :span="2" class="title">
        昵称
      </el-col>
      <el-col :span="10">
        <el-input v-model="searchForm.nickName" placeholder=" 昵称" clearable></el-input>


      </el-col>

      <el-col :span="2" :offset="1"> <el-button type="primary" @click="search">搜索</el-button></el-col>
    </el-row>



    <el-row>
      <el-button type="primary" plain @click="handlerAdd">添加</el-button>
    </el-row>




        <el-table
            :data="tableData"
            style="width: 100%"
            row-key="menuId"
            border
            lazy
            :load="load"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
              prop="menuName"
              label="菜单名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="orderNum"
              label="显示顺序"
              width="180">
          </el-table-column>
          <el-table-column
              prop="path"
              label="路由地址">
          </el-table-column>



          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>

              <el-button
                  size="mini"
                  type="primary"
                  @click="handleAddChild(scope.$index, scope.row)">新增
              </el-button>
            </template>
          </el-table-column>




        </el-table>





    <!-- 添加或者修改的样式 -->
        <el-dialog
        :title="title"
        :visible.sync="dialogVisible"

        width="700px"
    >

      <el-form ref="form" :model="form" label-width="80px"  v-if="dialogVisible" >
        <el-form-item label="菜单名称">
          <el-input v-model="form.menuName"></el-input>
        </el-form-item>
        <el-form-item label="显示顺序">
          <el-input v-model="form.orderNum"></el-input>
        </el-form-item>

        <el-form-item label="路由地址">
          <el-input v-model="form.path" key="nickName"></el-input>
        </el-form-item>
        <el-form-item label="组件路径">
          <el-input v-model="form.component" key="avatar"></el-input>
        </el-form-item>
        <el-form-item label="路由参数">
          <el-input v-model="form.query" key="email"></el-input>
        </el-form-item>
        <el-form-item label="是否为外链">
          <el-select v-model="form.isFrame" placeholder="请选择">
            <el-option key="0"    label="是" value="0"  ></el-option>
            <el-option key="1"    label="否" value="1"  ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否缓存">
          <el-select v-model="form.isCache" placeholder="请选择">
            <el-option key="0"    label="缓存" value="0"  ></el-option>
            <el-option key="1"    label="不缓存" value="1"  ></el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="菜单类型">
          <el-select v-model="form.menuType" placeholder="请选择">
            <el-option key="0"    label="目录" value="M"  ></el-option>
            <el-option key="1"    label="菜单" value="C"  ></el-option>
            <el-option key="1"    label="按钮" value="F"  ></el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="权限标识">
          <el-input v-model="form.perms" ></el-input>
        </el-form-item>

        <el-form-item label="菜单图标">
          <el-input v-model="form.icon" ></el-input>
        </el-form-item>

        <el-form-item >
          <el-button type="primary" @click="saveOrUpdate">保存</el-button>
        </el-form-item>



      </el-form>



    </el-dialog>



  </div>


</template>

<script>

import axios from  'axios'
import request from '@/utils/request'

export default {

  name:'Menu',
  data(){
    return {
      //不分页，一级菜单全部查询
      tableData:[],
      result:{
        total:0
      },
      searchForm:{
        current:1,
        size:10,
        nickName:''
      },
      title:'添加菜单',
      //添加或修改 的表单
      form:{
        menuName:'',
        parentId:0,
        orderNum:0,
        component:'',
        query:'',
        isFrame:'',
        isCache:'',
        menuType:''
      },
      userNameKey:'abc',
      dialogVisible:false

    }
  },
  methods:{
    queryList(){

      request({
        method:'get',
        url:'/sysMenu/loadTopMenu',
      }).then(tableData=>{
        //res axios封装的结果

        tableData.forEach((item)=>{
          item.hasChildren = true;
        })


        this.tableData = tableData;
      })



    },
    //加载下级菜单信息
    load(treeNode , tree, resolve ){

      console.log(tree)
      console.log("treeNode.menuId",treeNode.menuId)
      console.log(resolve)

      let parentId = treeNode.menuId;
      request({
        method:'get',
        url:'/sysMenu/loadChildrenMenu/'+parentId,
      }).then(tableData=>{
        //res axios封装的结果

        tableData.forEach((item)=>{
          item.hasChildren = true;
        })
        resolve(tableData)

      })

    },
    //当切换当前页号
    changeCurrent(){

      this.queryList();
    },
    search(){
      this.queryList();
    },

    saveOrUpdate(){
      console.log("this.form" ,this.form)

      request({
        method:'post',
        url:'/sysMenu/saveOrUpdate',
        data:this.form
      }).then(success=>{
        if(success){
          this.dialogVisible = false;
          this.$message({  message: '保存成功',
            type: 'success'});
          this.search();
        }
      })

    },
    handlerAdd(){


      // alert("单纯的true")
      this.resetFormData();
      this.form.parentId = 0;
      this.dialogVisible = true;

    },
    handleAddChild(index ,row){
      let parentId = row.menuId;
      this.resetFormData();
      this.form.parentId = parentId;
      this.dialogVisible = true;
    },
    //重置表单
    resetFormData(){
      this.form = {
        menuName:'',
        parentId:0,
        orderNum:0,
        component:'',
        query:'',
        isFrame:'',
        isCache:'',
        menuType:''
      }
    },
    //修改按钮
    handleEdit(index,row){
      //查询，


      let id = row.menuId;
      request({
        method:'get',
        url:'/sysMenu/getById/'+id
      }).then(form=>{
        this.form  = form;
        //打开dialog
        this.dialogVisible = true
      })



    },
    //删除按钮
    handleDelete(index , row ){
      let id = row.menuId;

      this.$confirm('确认要删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {


        request({
          method:'get',
          url:'/sysMenu/removeById/'+id,
        }).then(form=>{
          this.form  = form;
          //打开dialog
          this.search();
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    }

  },
  created(){

    //组件初始化的时候查询

    this.queryList();


  }


}


</script>

<style>
.title {
  height: 40px;
  line-height: 40px;
}
</style>